<template>
	<view>
		<u-cell-group>
			<u-cell-item title="品牌" :arrow="false" class="u-p-t-10 u-p-b-10">
				<u-input v-if="applyType == 1" :value="brand && brand.label" @tap="showBrandPicker = true" type="select" placeholder="请选择品牌" inputAlign="right"></u-input>
				<view class="" v-if="applyType == 2">
					<text>{{brand && brand.label}}</text>
				</view>
			</u-cell-item>
			<u-cell-item title="代码及描述" :arrow="false" class="u-p-t-10 u-p-b-10">
				<u-input v-if="applyType == 1" :value="product && product.label" @tap="showProductPicker = true" type="select" placeholder="请选择代码及描述" inputAlign="right"></u-input>
				<text v-if="applyType == 2">{{product && product.label}}</text>
			</u-cell-item>
			<u-cell-item title="库存" class="u-p-t-10 u-p-b-10" :arrow="false" :value="productList[productPickerIndex] && productList[productPickerIndex].StockNumber"></u-cell-item>
			<u-cell-item title="申请数量" class="u-p-t-10 u-p-b-10" :arrow="false">
				<view class="u-flex-col u-col-bottom">
					<u-input :height="60" :disabled="applyType == 2" :border="applyType == 1" style="width: 50%;" type="number" inputAlign="right" v-model="form.Product.Number"></u-input>
				</view>
			</u-cell-item>
			<block v-if="applyType == 2">
				<u-cell-item title="验收数量" class="u-p-t-10 u-p-b-10" :arrow="false">
					<view class="u-flex-col u-col-bottom">
						<u-input :height="60" :border="true" style="width: 50%;" type="number" inputAlign="right" v-model="form.Product.CheckNumber"></u-input>
					</view>
				</u-cell-item>
				<u-cell-item title="差异数量" class="u-p-t-10 u-p-b-10" :arrow="false">
					<view class="u-flex-col u-col-bottom">
						<u-input :height="60" :border="false" :disabled="true" style="width: 50%;" type="number" inputAlign="right" :value="differencesNum"></u-input>
					</view>
				</u-cell-item>
			</block>
			
			<u-cell-item class="u-p-t-10 u-p-b-10" :title="applyType == 1 ? '申请时间' : '验收时间' " :arrow="false" :value=" form.ApplyTime | date('yyyy-mm-dd hh:MM')"></u-cell-item>

			<block v-if="selectType != 1">
				<u-cell-item title="折扣" :arrow="false" class="u-p-t-10 u-p-b-10">
					<block v-if="applyType == 1">
						<u-input v-if="selectType == 2" inputAlign="right" @tap="showDiscountPicker = true" :value="discount && discount.label" type="select"  :selectOpen="showDiscountPicker"></u-input>
						<view class="u-flex" v-if="selectType == 3">
							<u-input  inputAlign="right" type="number" v-model="form.Product.Discount" ></u-input>%
						</view>
					</block>
					<view class="u-flex" v-if="applyType == 2">
						<u-input :disabled="true" inputAlign="right" :value="form.Product.Discount" ></u-input>%
					</view>
				</u-cell-item>
				<u-cell-item title="单价" class="u-p-t-10 u-p-b-10" :arrow="false" :value="form.Product.StandardAmount"></u-cell-item>
				<u-cell-item title="金额小计" class="u-p-t-10 u-p-b-10" :arrow="false" :value="subtotal"></u-cell-item>
			</block>

			<u-cell-item title="备注" class="u-p-t-10 u-p-b-10" :arrow="false" >
				<view class="u-flex-col u-col-bottom">
					<u-input style="width: 80%;" type="textarea" :border="true" inputAlign="right" v-model="form.Remark"></u-input>
				</view>
			</u-cell-item>
		</u-cell-group>

		<u-select :default-value="[brandPickerIndex]" @confirm="onBrandChange" v-model="showBrandPicker" :list="brandList" label-name="Value" value-name="Key"></u-select>
		<u-select :default-value="[productPickerIndex]" @confirm="onProductChange" v-model="showProductPicker" :list="productList" label-name="Value" value-name="Key"></u-select>
	
		<u-select :default-value="[discountPickerIndex]" @confirm="onDiscountChange" v-model="showDiscountPicker" :list="discountList"></u-select>
	</view>
</template>

<script>
export default {
	name: 'module-apply-form',
	props: {
		selectType: {
			type: Number,
			default: 1
		},
		applyType: {
			type: Number,
			default: 1
		},
		loadForm: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			brandList: [],
			productList: [],
			brandPickerIndex: -1,
			productPickerIndex: -1,
			brand: null,
			product: null,

			showBrandPicker: false,
			showProductPicker: false,
			
			discountList: [
				{ label: '100%', value: 100},
				{ label: '50%', value: 50},
				{ label: '0%', value: 0}
			],
			discount: {
				label: '100%', value: 100,
			},
			discountPickerIndex: 0,
			showDiscountPicker: false,
			
			GroupId: '',
			uuid: '',

			form: {
				BrandId: null,
				ApplyTime: parseInt(new Date().getTime() / 1000),
				Remark: '',
				ProductBaseList: [],
				ProductList: [],
				Product: {
					ModuleInfoId: 0,
					ProductId: null,
					Number: 1,
					Discount: 100,
					// 单价
					StandardAmount: 0,
					// 金额小计
					AmountSubtotal: 0,
				},
			}
		};
	},

	created() {
		if(!this.loadForm) {
			this.getBrandList();
		}
	},
	
	
	computed: {
		differencesNum() {
			let number = parseInt(this.form.Product.Number);
			
			let checkNumber = 0;
			if(this.form.Product.CheckNumber) {
				checkNumber = parseInt(this.form.Product.CheckNumber);
			}
			return number - checkNumber;
		},
		
		subtotal() {
			let price = 0;
			let count = 0;
			let discount = 0;
			
			if(this.form.Product.Number > 0) {
				count = this.form.Product.Number
			}
			
			if(this.form.Product.Discount) {
				discount = this.form.Product.Discount * 0.01
			}
			
			if(this.form.Product.StandardAmount) {
				price = this.form.Product.StandardAmount
			}
			
			const result = (price * count * discount).toFixed(2);
			return result;
		},
	},

	methods: {
		
		initForm(data) {
			console.log(data)
			if(data) {
				this.GroupId = data.GroupId;
				this.uuid = data.uuid;
				if(data.ApplyList && data.ApplyList.length > 0) {
					this.form = Object.assign(this.form, this.$u.deepClone(data.ApplyList[0]));
					
					console.log('this.form', this.form)
					
					if(this.loadForm) {
						if(this.form.ProductList && this.form.ProductList.length > 0) {
							this.form.Product = this.form.ProductList[0]
							this.discountPickerIndex = this.discountList.findIndex(item => item.value == this.form.Product.Discount)
							this.discount = this.discountList.find(item => item.value == this.form.Product.Discount)
							if(this.applyType == 2) {
								if(this.form.ProductList[0].CheckTime) {
									this.form.ApplyTime = this.form.ProductList[0].CheckTime;
								}else {
									this.form.ApplyTime = parseInt(new Date().getTime() / 1000)
								}
								this.form.Remark = this.form.ProductList[0].CheckRemark;
							}
							
						}
						this.getBrandList()
					}
					
				}
			}
		},
		
		onBrandChange(e) {
			if (!e[0].value || !e[0].label) {
				if (this.brandList.length > 0) {
					this.brand = {
						label: this.brandList[0].Value,
						value: this.brandList[0].Key
					};
				} else {
					return false;
				}
			} else {
				this.brand = e[0];
			}
			this.brandPickerIndex = this.brandList.findIndex(item => item.Key == this.brand.value);

			this.form.BrandId = this.brand.value;
			this.productList = [];
			this.productPickerIndex = -1;
			this.product = null;
			this.getProductList(this.brand.value);
		},

		onProductChange(e) {
			if (!e[0].value || !e[0].label) {
				if (this.productList.length > 0) {
					this.product = {
						label: this.productList[0].Value,
						value: this.productList[0].Key
					};
				} else {
					return false;
				}
			} else {
				this.product = e[0];
			}
			this.productPickerIndex = this.productList.findIndex(item => item.Key == this.product.value);

			this.form.Product.ProductId = this.product.value;
			this.form.Product.StandardAmount = this.productList[this.productPickerIndex].Amount;			
			
			console.log(this.form)
		},
		
		onDiscountChange(e) {
			if (!e[0].label) {
				if (this.discountList.length > 0) {
					this.discount = {
						label: this.discountList[0].label,
						value: this.discountList[0].value
					};
				} else {
					return false;
				}
			} else {
				this.discount = e[0];
			}
			
			this.discountPickerIndex = this.discountList.findIndex(item => item.value == this.discount.value);
			this.form.Product.Discount = this.discount.value;
		},

		getBrandList() {
			this.$u.api
				.getBrandDic({
					SelectType: this.selectType
				})
				.then(res => {
					const { ResultCode, Module_BrandList, Shell_Pro_BrandList, Entity_Pro_BrandList } = res;
					if (ResultCode === 1) {
						if (this.selectType == 1) {
							this.brandList = Module_BrandList;
						}
						if (this.selectType == 2) {
							this.brandList = Shell_Pro_BrandList;
						}
						if (this.selectType == 3) {
							this.brandList = Entity_Pro_BrandList;
						}
						
						if(this.loadForm) {
							
							this.$nextTick(() => {
								this.brandPickerIndex = this.brandList.findIndex(item => item.Key == this.form.BrandId)
								let currentBrand = this.brandList.find(item => item.Key == this.form.BrandId);
								this.brand = {
									label: currentBrand.Value,
									value: currentBrand.Key
								}
								this.getProductList(this.brand.value)
							})
						}
					}
				});
		},

		getProductList(brandId) {
			this.$u.api
				.getProductDic({
					SelectType: this.selectType,
					BrandId: brandId
				})
				.then(res => {
					const { ResultCode, ProductList } = res;
					if (ResultCode === 1) {
						this.productList = ProductList;
						
						this.form.ProductBaseList = ProductList;
						
						if(this.loadForm) {
							this.productPickerIndex = this.productList.findIndex(item => item.Key == this.form.Product.ProductId)
							let currentProduct = this.productList.find(item => item.Key == this.form.Product.ProductId);
							this.product = {
								label: currentProduct.Value,
								value: currentProduct.Key
							}
						}
					}
				});
		}
	}
};
</script>

<style lang="scss"></style>
